<template>
  <div class="home-en">
    <div class="home">
      <transition :name="distance">
        <router-view class="child-view"></router-view>
      </transition>
    </div>
    <ul :class="index ? 'ulOpacity' : ''">
      <li ref="routerBtnBg" v-for="(item, index) in ulList" :key="index" @click="turnJump(item.path, index)">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  // name: "Home",
  // components: {}
  data() {
    return {
      // 当前页面索引
      index: 0,
      // 所有轮播子页面
      ulList: [{path: '/', name: '同心'}, {path: 'homeMap', name: '知情'}, {path: 'homeProtect', name: '防护'}],
      // 控制过渡
      distance: 'distance-top',
      // 防止滚动过快
      wheelFlag: true,
      // 防止点击过快
      clickFlag: true,
      // 防止滚动点击过快的休息时间
      timeFlag: 2000,
      ulOpacity: true
    }
  },
  // 切换ul li类名
  watch: {
    index(newIndex, oldIndex) {
      this.$refs.routerBtnBg[oldIndex].className = '';
      this.$refs.routerBtnBg[newIndex].className = 'routerBtnBg';
    }
  },
  // 刷新时重置路由到指定页面
  created() {
    this.$router.push('/').catch(error => error);
  },
  mounted() {
    this.wheelAdd();
  },
  methods: {
    // 点击切换页面函数
    turnJump(val, valNum) {
      var This = this;
      if (valNum == this.index || !this.clickFlag) return;
      This.clickFlag = false;
      // console.log(this.index, valNum)
      if (valNum > this.index) {
        // 往上走(需配合css)
        this.distance = 'distance-top';
        //  console.log('上')
      } else {
        // 往下走(需配合css)
        this.distance = 'distance-bottom';
        //  console.log('下')
      }
      this.index = valNum;
      // 页面转跳
      this.$router.push(val);
      setTimeout(() => {
        This.clickFlag = true;
      }, This.timeFlag);
    },
    // 添加滚轮事件函数
    wheelAdd() {
      var This = this;
      document.onmousewheel = wheelFn; // 非火狐
      document.addEventListener("DOMMouseScroll", wheelFn, false); // 火狐
      function wheelFn(e) {
        var event = e || window.event;
        if (event.wheelDelta) {
          //非火狐
          if (event.wheelDelta > 0) {
            //向上滚动
            wheelTop();
          } else {
            // 向下滚动
            wheelBottom();
          }
        } else if (event.detail) {
          if (event.detail < 0) {
            //向上滚动
            wheelTop();
          } else {
            //向下滚动
            wheelBottom();
          }
        }
      }
      /* 向上滚动 */
      function wheelTop() {
        // 限制滚动
        if (This.index <= 0 || !This.wheelFlag) {
          return;
        }
        This.wheelFlag = false;
        // 往下走(需配合css)
        This.distance = 'distance-bottom'
        // 切换页面
        This.$router.push(This.ulList[This.index - 1].path);
        // 重新赋当前页
        This.index--;
        // 1s 重置
        setTimeout(() => {
          This.wheelFlag = true;
        }, This.timeFlag);
      }
      /* 向下滚动 */
      function wheelBottom() {
        // 限制滚动
        if (This.index >= This.ulList.length - 1 || !This.wheelFlag) {
          return;
        }
        This.wheelFlag = false;
        // 往下走
        This.distance = 'distance-top';
        // 切换页面
        This.$router.push(This.ulList[This.index + 1].path);
        // 重新赋当前页
        This.index++;
        // 1s 重置
        setTimeout(() => {
          This.wheelFlag = true;
        }, This.timeFlag);
      }
    }
  }
};
</script>

<style scoped>
.home-en {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.home {
  width: 100%;
  height: 100%;
}
.child-view {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
  transition: all 2s cubic-bezier(.55,0,.1,1);
}
.distance-top-enter, .distance-bottom-leave-active {
  /* opacity: 0; */
  /* transition: all .8s; */
  transform: translate(0, 100%);
}
.distance-top-leave-active, .distance-bottom-enter {
  /* opacity: 0; */
  /* transition: all .8s; */
  transform: translate(0, -100%);
}

ul {
  position: absolute;
  right: 2%;
  top: 0; bottom: 0;
  margin: auto;
  width: 70px;
  height: 180px;
  transition: opacity 2s;
  opacity: 0;
}
ul > li {
  width: 60px;
  height: 20px;
  border-radius: 4px;
  margin: 20px 10px;
  color: #ddd;
  cursor: pointer;
  background: rgba(0, 0, 0, .5);
  font-size: 14px;
}
.ulOpacity {
  opacity: 1;
}
.routerBtnBg {
  background-color: #36c0a8;
}
</style>
